/* 阴影效果 */
.box1 {
  margin: 2rem;
  border: 1px solid #999;
  /* 
    box-shadow是阴影和外发光
    参数1是颜色，参数2是x轴距离，参数3是y轴距离，参数4是z轴距离
    其实z轴就是外发光，一般来说xy和z不会同时有距离
  */
  box-shadow: #999 0.6rem 0.4rem 0px;
}

/* 外发光 */
.box2 {
  margin: 2rem;
  border: 1px solid #ff0000;

  box-shadow: #ff0000 0px 0px 0rem;
  transition: box-shadow 0.5s;
}

.box2:hover {
  box-shadow: #ff0000 0px 0px 1rem;
}

/* 文字效果 */
.box3 {
  margin: 1rem;
  text-shadow: #999 0.6rem 0.6rem 0px;
}

.box4 {
  margin: 2rem;
  text-shadow: #ff0000 0px 0px 1rem;
}
